<template>
  <div class="myorder-box flex fdc jcs">
    <div class="myorder-item-b">
      <div
        class="myorder-item flex jcs alc"
        :class="item.status === '预约已取消' ? 'disabled' : ''"
        v-for="item in orderList"
        :key="item.index"
      >
        <div class="myorder-item-l">
          <p class="orderitem-num fs12 cl9 pb12">订单号：{{ item.index }}</p>
          <p class="orderitem-tit fs15 cl3 fw500 pb2">{{ item.time }}</p>
          <p class=" orderitem-date fs13 cl6">
            <span v-if="item.name" class="cl6 mr16">{{ item.name }} × {{ item.total }}</span>
            <!-- <span class="cl9"> ¥ {{ item.price }} × {{ item.total }}</span> -->
          </p>
        </div>
        <div class="myorder-item-r">
          <p class="mb15">
            <!-- <span class="fs16 fw500 clFB mr10">¥ {{ item.totalPrice }}</span> -->
            <span class="fs14 cl6 fw500">{{ item.status }}</span>
          </p>
          <p>
            <el-button v-if="item.status === '预约成功'" size="mini"
              >取消</el-button
            >
          </p>
        </div>
      </div>
    </div>

    <el-pagination
      class="order-paganation"
      background
      layout="prev, pager, next"
      :total="1000"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'reserve',
  data () {
    return {
      orderList: [
        {
          index: 'JIOWW8723',
          name: '平日普通票',
          time: '05.15 周五 09:00 - 15:00',
          total: 3,
          price: 200,
          totalPrice: 600,
          status: '预约成功'
        },
        {
          index: 'JIOWW8724',
          name: '平日普通票',
          total: 3,
          price: 100,
          totalPrice: 300,
          status: '预约已取消',
          time: '05.15 周五 09:00 - 15:00'
        }
      ]
    }
  }
}
</script>

<style scoped lang="less">
.myorder-box {
  width: 100%;
  max-width: 1274px;
  margin: 0 auto;
  margin-top: 24px;
  cursor: pointer;
  .order-paganation {
    align-self: center;
    padding-top: 10px;
    padding-bottom: 20px;
  }
  .myorder-item-b {
      height: 100%;
  }
  .myorder-item {
    width: 100%;
    height: 104px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid #f4f4f4;
    padding: 16px 32px;
    &:hover {
      background: #f4f4f4;
    }
    .myorder-item-r {
      text-align: right;
    }
  }
  .disabled {
    * {
      color: #ccc;
    }
  }
}
</style>
